<template>
  <div>
   <selector :options="options" @optionChangedEvent="optionChangedEventHandler"></selector>
    <div v-show="chartShow" id="HistoryUsageStatistics" class="chart"></div>
    <div v-show="!chartShow" class="warn">本区域暂无历史电费统计</div>
  </div>

</template>

<script>
import * as echarts from "echarts";
import selector from "../selector";
import { config } from "./config";

export default {
  name: "chart-history-usage-statistics",
  components: {
    selector
  },
  mounted: function() {
    this.setDataByTimeType('alltime')
  },
  methods: {
    setDataByTimeType: function(timeType) {
      return this.$api.dataByBuildingTypeNTimeType('total', timeType).then(res => {
        let data = eval(res.data.data.data)
        let time = res.data.data['updateTime']
        this.$emit('historyUsageStatUpdateTime', time)
        console.log(time)

        let x = []
        let y = []
        data.forEach(ele => {
          x.push(ele['time'])
          y.push(parseFloat(ele['fee']).toFixed(1))
        })

        let ec = echarts.init(document.getElementById("HistoryUsageStatistics"), null, { renderer: "svg" });
        ec.setOption(this.getChartOption(x, y));

      })
    },


    optionChangedEventHandler: function(val) {
      let option = this.options.filter(ele => {
        return ele.name === val
      })
      if (option) {
        this.setDataByTimeType(option[0].value)
      }

    },

    getChartOption: function(xlist, ylist) {
      return {
        grid: {
          x: 30,
          y: 10,
          x2: 60,
          y2: 80,
          borderWidth: 10
        },
        color: config.chartItemColor,
        dataZoom: [
          {
            type: 'inside',
            start: 80,
            end: 100
          },
          {
            start: 80,
            end: 100
          }
        ],
        tooltip: {
          trigger: "axis",
          showContent: true,
          axisPointer: {
            lineStyle: {
              color: config.chartToolTipAxisColor
            }
          }

        },
        xAxis: {
          type: "category",
          data: xlist,
          axisLabel: {
            // interval: 5
          },
          axisLine: {
            lineStyle: {
              color: config.chartLabelColor
            }
          }
        },
        yAxis: {
          type: "value",
          position: "right",
          axisLine: {
            lineStyle: {
              color: config.chartLabelColor
            }
          },
          splitLine: {
            show: false

          }
        },
        // backgroudColor: 'transparent',
        series: [{
          data: ylist,
          type: "line",
          smooth: true
        }]
      };

    }


  },

  data() {
    return {
      chartShow: true,  // 表格是否有效


      options: [{
        value: 'alltime',
        name: '全部时间'
      }, {
        value: 'month',
        name: '月'
      }, {
        value: 'week',
        name: '周'
      }, {
        value: 'day',
        name: '24小时'
      }],


    };
  }

};
</script>

<style scoped>
.chart {

  width: 100%;
  height: 600px;
}

.select {
  margin: 10px 0;
  width: 160px;
  background-color: transparent;
}
</style>